<template>
  <div class="msg-container">
    <Navbar title="工作消息" />
    <div class="content">
      <UserItem v-for="item in recentList" :key="item.id" :user="item" talk />
      <van-empty v-if="!recentList.length" description="没有消息" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated } from 'vue'
import Navbar from '@/components/Navbar/index.vue'
import ContactServe from '@/api/contact.ts'
import UserItem from '@/views/contact/comp/userItem.vue'

const recentList = ref<IContactor[]>([])

const fetchRecent = () => {
  ContactServe.recentList().then(resp => {
    if (resp.code == 0) {
      const { data } = resp
      recentList.value = data
    }
  })
}

let pullTimer: number | null = null
onActivated(() => {
  fetchRecent()
  pullTimer = window.setInterval(() => {
    fetchRecent()
  }, 10 * 1000)
})

onDeactivated(() => {
  if (pullTimer) {
    window.clearInterval(pullTimer)
    pullTimer = null
  }
})
</script>

<style lang="less">
.msg-container {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .content {
    padding-top: 12px;
    overflow-y: scroll;
    flex-grow: 1;
  }
}
</style>
